import React, { useState, useEffect} from 'react'
// import fetch from 'node-fetch'
import Head from 'next/head'
import Link from 'next/link'
// import withScrollReveal from 'react-scrollreveal'
import GmTeleport from '@/components/GmTeleport'
// import GmScrollReveal from '@/components/GmScrollReveal'
import RenderCompleted from '@/components/isMounted';
import Layout from '../layouts'
import Component from '@/components/i-hammer/InnerRounding'
import GmTooltip from '@/components/GmTooltip'
import GmCheckbox from '@/components/GmCheckbox'
import GmRadio from '@/components/GmRadio'
import GmSwitch from '@/components/GmSwitch'
import GmDialog from '@/components/GmDialog'
// TranslucentBorders
// MultipleBorders
// InnerRounding
// BackgroundPosition
// import ScrollReveal from 'scrollreveal'
// import dynamic from 'next/dynamic'

// const withScrollReveal = dynamic(() => import('react-scrollreveal'),
// {
//   ssr: false   //这个要加上,禁止使用 SSR
// })

function Ihammer(props: any) {
  const [isChecked, setChecked] = useState<boolean>(false);
  const isMounted = RenderCompleted()
  const handleCheck = () => {
    setChecked(!isChecked)
  }
  useEffect(() => {
    console.log(isMounted)
    // isMounted&&ScrollReveal().reveal('.sr-item', {
    //   reset: true,
    //   delay: 400,
    // }, 100)
  }, [isMounted])
  
  const { type, data: { data: { films } } } = props;
  return (
    <Layout>
      <Head>
        <title>Ihammer</title>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      <GmTooltip content="三生三世">------是是是tooltip</GmTooltip>
      <label>
        <input
          required
          type="text"
          id="username"
          autoComplete="off"
          placeholder="请输入内容"
          className="input-cubic-bezier input-trick"
          pattern="^\w+$" />
        <span className="info">仅支持字母、数字和下划线组合！!</span>
      </label>
      <div>------是是是</div>
      <GmCheckbox name="checkbox-ss" />
      <GmRadio name="radio-ss" />
      <GmSwitch checked={isChecked} onChange={handleCheck} name="switch-ss" />
      <GmTeleport>
        <GmDialog visible={isChecked}>
          <div style={{}}>
            是发的舒服舒服
            <p>sssfs</p>
          </div>
        </GmDialog>
      </GmTeleport>
      <Component />
      <div>------是是是</div>
      <h3 className="sr-item">静态化: getStaticPaths-getStaticProps动态路径获取数据</h3>
      <ul className="flex justify-around">
        {
          films.map((item: any) => {
            return (
              <Link href="/static/[type]" as={`/static/${item.filmId}`} key={item.filmId}>{item.name}</Link>
            )
          })
        }
      </ul>
      <hr />
      <h3 className="sr-item--sequence">非静态化: getServerSideProps非静态化获取动态路径数据</h3>
      <ul className="flex justify-around">
        {
          films.map((item: any) => {
            return (
              <Link href="/non-static/[type]" as={`/non-static/${item.filmId}`} key={item.filmId}>{item.name}</Link>
            )
          })
        }
      </ul>
    </Layout>
  )
}
export default Ihammer;
// @ts-ignore
// export default withScrollReveal([
//   {
//     selector: '.sr-item',
//     options: {
//       reset: true,
//     },
//   },
//   {
//     selector: '.sr-item--sequence',
//     options: {
//       reset: true,
//       delay: 400,
//     },
//     interval: 100
//   }
// ])(Ihammer);

// 服务端获取的数据并通过return一个包含props为key的对象 - 注入或挂载到组件的props
export const getServerSideProps = async () => {
  // let res = await fetch('http://localhost:3000/api/movie');
  // let data = await res.json();
  let data = {
    "status": 0, "data": {
      "films": [
        { "filmId": 5268, "name": "送你一朵小红花" },
        { "filmId": 5257, "name": "拆弹专家2" },
        { "filmId": 5299, "name": "缉魂" },
        { "filmId": 5291, "name": "心灵奇旅" },
        { "filmId": 5279, "name": "温暖的抱抱" },
        { "filmId": 5295, "name": "许愿神龙" },
        { "filmId": 5301, "name": "叱咤风云" },
        { "filmId": 4922, "name": "大红包" },
        { "filmId": 5311, "name": "武汉日夜" },
        { "filmId": 4836, "name": "紧急救援" }]
    }
  };
  console.log('serverSide', data.data.films.length)
  // 返回一个包含props为key值的对象
  return {
    props: {
      type: 'serverSide',
      data,
    }
  }
}
